import React,{Component} from 'react'
import { NavLink } from 'react-router-dom';
export default class ComA extends React.Component {
  constructor () {
    super();
    this.data = {
      name: 'Jack',
      age: 18,
      lesson: ['html', 'css', 'js'],
      isTrue: true
    };
  }
  show() {
    console.log(this.data.age);
  }
  getArg(num) {
    console.log(num);
  }
  logEvent(num, e) {
    console.log(num);
    console.log(e);
  }
  render() {  
    let pEl;      
    if(this.data.isTrue) {
      pEl = <p>是真的！123</p>
    }else {
      pEl = <p>不是真的！123</p>
    }                                                            
    return <div>
      <p className={this.data.name}>{this.data.age}</p>
      {
        this.data.lesson.map(item => {
        return <button key={item}>{item}</button>
        })
      }
      <p>{this.data.isTrue? '': '不'}是真的！</p>
      <hr />
      {pEl}
      <hr />
      <button onClick={this.show.bind(this)}>ES5的方式</button>
      <button onClick={()=>this.show()}>ES6的方式</button>
      <hr />
      <button onClick={this.getArg.bind(this, 5)}>ES5的传递普通参数</button>
      <button onClick={()=>this.getArg(6)}>ES6的传递普通参数</button>
      <hr />
      {/* ES5的传递事件对象 */}
      <input onChange={this.logEvent.bind(this,555)} />
      {/* ES6的传递事件对象 */}
      <input onChange={(e) => this.logEvent(e, 666)} />
      {/* {(function() {
        if(this.data.isTrue) {
          return <p>是真的！</p>
        }else { 
          return <p>不是真的！</p>
        }
      })()} */}
      <hr />
        <NavLink to="/" activeClassName="active">首页</NavLink><br />
        <NavLink to="/coma" activeClassName="active">coma</NavLink><br />
        <NavLink to="/comb" activeClassName="active">comb</NavLink><br />
        <NavLink to="/comc" activeClassName="active">comc</NavLink><br /> 
    </div>
  }
}